lat = station.map(({Latitude:actualValue})=>actualValue);  //need to turn data into array (list of numbers to display on y-axis)
      
long = station.map(({Longitude:actualValue})=>actualValue); //list of dates for x axis
          
names = station.map(({Name:actualValue})=>actualValue);

function makeArray(sitearray) { //makeArray is a function
    let sets = [];
    for (let s = 0; s <= 25; s ++) { //loops through the length of "names" to make sets
      let pairs = [];
      pairs[0] = sitearray[s];
      pairs[1] = lat[s]
      pairs[2] = long[s];
      sets[s] = pairs
      
    };
      return sets;
  }
list_of_pairs = [makeArray(names)][0]; //list of pairs is now an ARRAY of arrays, which will be used to make markers.    

// Thanks to https://blog.webnersolutions.com/javascript-how-to-lighten-a-color-by-some-percentage/  
  function determineColor(siteID) {
  
  const allvals = filtered.map(({Value:actualValue})=>actualValue); 
  
  const thissite = filtered.filter(function(waterFilter) {
  return siteID.includes(waterFilter.Name);// &&
    //mymonth.includes(waterFilter.Month) &&
    //year.includes(waterFilter.Year);
})
    const vals = thissite.map(({Value:actualValue})=>actualValue); 
    const sum = vals.reduce((a, b) => a + b, 0);
    const ave = (sum / vals.length) || 0;
    const perc = 100-((ave - Math.min.apply(Math, allvals))/ (Math.max.apply(Math, allvals)-Math.min.apply(Math, allvals)))*100;
    
    var color = "#23362d"
    
    var R = parseInt(color.substring(1,3),16);
    var G = parseInt(color.substring(3,5),16);
    var B = parseInt(color.substring(5,7),16);

    R = parseInt(R * (perc**2) / 100);
    G = parseInt(G * (perc**2) / 100);
    B = parseInt(B * (perc**2) / 100);

    R = (R<255)?R:255;
    G = (G<255)?G:255;
    B = (B<255)?B:255;

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

  var return_color = "#"+RR+GG+BB;
//return(color)
return(return_color)
}

// Makes markers 
markers = {


 var markers = {};
    
    for (var i = 0; i <= 25; i++) { //need to replace 74 but putting a variable length here breaks it so I am afraid to. 
      let id_name = [list_of_pairs[i][0]];
      //This is in case inputs are selected when map is loaded.
      //Untested: might break. 
   //   function determineIcon(input) {
     //   if (results.includes(input)) {
       //   return waterIcon2
         // } else {
          //return waterIcon
         //}
   //   }
      //shorthand for this i
      let name_id = list_of_pairs[i][0]
      
      markers[name_id] = new L.circleMarker(
        [list_of_pairs[i][1], list_of_pairs[i][2]],
      {options: 
     {Name: list_of_pairs[i][0]}, //this is necessary 
      id: list_of_pairs[i][0],
      color: determineColor(list_of_pairs[i][0]) 
      })  //also this 
    //Add event listeners 
   //   .on('mouseover', highlightFeature)
    //  .on('mouseout', resetHighlight)
     // .on('click', toggleFeature)
      .bindPopup(list_of_pairs[i][0])
      
      .addTo(glknParks);
     //This part allows markers to be called by checkbox inputs by creating an object
     //Where the key is the site name and the value is the marker. 
     markers[name_id].properties = {};
     markers[name_id].properties.Name = list_of_pairs[i][0];
    
      
    } //for loop close
  
  return markers;

}

//Initiate leaflet map
L = {
  const L = await require("leaflet/dist/leaflet.js");
  if (!L._style) {
    const href = await require.resolve("leaflet/dist/leaflet.css");
    document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
  }

  return L; //to call leaflet, use "L" (ie L.marker)
};

//Add tiles to the map. 
//Currently using openstreetmap b/c it doesn't have the loading issue that stamen does. 

glknParks = {
  
  let map = L.map(container);
  
  var lidarBase = L.tileLayer.wms(
'https://elevation.nationalmap.gov/arcgis/services/3DEPElevation/ImageServer/WMSServer?',

    {
        layers: '3DEPElevation:Hillshade Gray',
        className: 'lidarBase',
        attribution: 'U.S. Geological Survey National Map - 3D Elevation Program Lidar'
    }
);

 var OpenStreetMap_Mapnik = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
  
   L.control.layers(
    {
      "Open Street Map": OpenStreetMap_Mapnik,
      "LiDAR": lidarBase
    },
    null,
    {position: 'topleft'}
  ).addTo(map);
  
  L.control.scale().addTo(map);
  //setView is my best estimation but should be fiddled with later
  map.setView([44.8, -90], 7);

  return map; 

};

viewof varname = Inputs.select(
  data.map(d => d.Variable), 
  {label: "Variable:", unique: true, sort: true, multiple: false, value: "pH"}
)

viewof year = Inputs.select(
  data.map(d => d.Year), 
  {label: "Year:", unique: true, sort: true, multiple: false, value: 2019}
)

viewof mymonth = Inputs.select(
  data.map(d => d.Month), 
  {label: "Month:", unique: true, sort: true, multiple: false, value: 5}
)

viewof toggle_boxplot = Inputs.toggle({label: "Boxplot by Year", value: true})

filtered = data.filter(function(waterFilter) {
  return varname.includes(waterFilter.Variable);// &&
    //mymonth.includes(waterFilter.Month) &&
    //year.includes(waterFilter.Year);
})